<!DOCTYPE html>
<html>
<head>
    <title>Canvas 绘制夹角和射线</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        let data =[
            {
                A:[287,412],
                B:[287,685],
                C:[14,685]
            },
            {
                A:[287,299],
                B:[480,492],
                C:[287,685]
            },
            {
                A:[387,299],
                B:[180,192],
                C:[287,685]
            },
        ]
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 定义固定顶点的坐标
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;

        // 定义两条射线的起始点和终点坐标
        var line1StartX = centerX;
        var line1StartY = centerY;
        var line1EndX = 100;
        var line1EndY = 200;

        var line2StartX = centerX;
        var line2StartY = centerY;
        var line2EndX = 300;
        var line2EndY = 100;

        // 绘制两条射线
        ctx.beginPath();
        ctx.moveTo(line1StartX, line1StartY);
        ctx.lineTo(line1EndX, line1EndY);
        ctx.lineWidth  = 5;
        ctx.strokeStyle = 'blue';//rgba(0,222,255,.5)
        ctx.moveTo(line2StartX, line2StartY);
        ctx.lineTo(line2EndX, line2EndY);
        ctx.strokeStyle = 'blue';//rgba(0,222,255,.5)
        ctx.stroke();
        // 计算两条射线的夹角
        var angle1 = Math.atan2(line1EndY - centerY, line1EndX - centerX);
        var angle2 = Math.atan2(line2EndY - centerY, line2EndX - centerX);
        // 绘制夹角的弧线
        console.log(angle1, angle2);
        ctx.beginPath();
        ctx.arc(centerX, centerY, 100, angle1, angle2);
        ctx.strokeStyle = 'red';//rgba(0,222,255,.5)
        ctx.stroke();
    </script>
</body>
</html>
